import React, { Component } from 'react'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import "./itemdetail.less"

// 引入轮播图
import Operbanner from "../../../components/operbanner/banner.js"

import cookies from "js-cookie"

import LoginHint from "./login_hint.js"

// 选规格页
import ShoopDetail from "./shopp_detail.js"
class Itemdetail extends Component {

  state = {
    type: [],//所选规格
    num: 1,//设定数量
    allmoney: 0,//总价
    typeboxisshow: false,//判断选规格盒子开关
    listitmedetail: {},//获取当前数据
    flag: false,//开关
    loginhint: false,
  }
  componentDidMount() {
    let { jumpListDetail, getCollectionCommodity, getChooseType, listitmedetail, choosetype } = this.props

    let { type, num } = this.state
    // 上来就添加
    if (choosetype.commodity_id === undefined) {
      getChooseType({
        ...listitmedetail,
        type,
        num
      })
    }
    // 调取数据商品
    jumpListDetail({
      commodity_id: JSON.parse(sessionStorage.getItem('shop_id')),
      user_id: cookies.get('user_id')
    })
  }

  render() {
    let { collection_commodity, similardata, choosetype, listitmedetail, getChooseType } = this.props
    let { typeboxisshow } = this.state

    let shop_img = sessionStorage.getItem('shop_img')

    // collection_commodity = sessionStorage.getItem("collection_commodity")
    return (
      <div className='item_detail_box animate__animated  animate__zoomIn'>
        {/* 表头 */}
        <div className="item_detail_top" style={{
          background: `url(${shop_img})`,
          backgroundSize: '100%',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: '50% 0'
        }}>
          <span className="iconfont icon-fanhui2 item_detail_icon" onClick={() => {
            sessionStorage.setItem("flag", JSON.stringify(true))
            this.props.history.push(JSON.parse(sessionStorage.getItem("shop_router")))
            // 点击返回按钮时直接清空暂存的此页面的选规格
            getChooseType({})
          }}></span>

        </div>

        <div className="item_detail_cont">
          {/* 商品介绍 */}
          <div className="item_detail_cont_introduce">
            <h1>{listitmedetail.commodity_namer}</h1>
            <p>{listitmedetail.commodity_mess}</p>
            <p className="item_detail_cont_introduce_p" onClick={() => { this.cahngeCollectState() }}>
              {collection_commodity === "1" ? <span className="iconfont icon-shoucang1 item_detail_cont_introduce_span2"></span>
                : <span className="iconfont icon-shoucang item_detail_cont_introduce_span"></span>}
              <span className="item_detail_cont_introduce_shou">收藏</span>
            </p>

          </div>

          {/* 规格 */}
          <div className="item_detail_cont_type" onClick={() => {
            this.openTypeBox()
          }}>
            <p>已选</p>
            {
              choosetype.commodity_id !== undefined
                ? <p className="item_detail_cont_type_p">{`${listitmedetail.commodity_namer}, ${choosetype.num}件`}</p>
                : <p className="item_detail_cont_type_p">{`${listitmedetail.commodity_namer}, ${1}件`}</p>
            }
            <p></p>
          </div>

          {/* 类似商品 */}
          <div className="item_detail_cont_introduce">
            {/* 这里是一个手动轮播图 */}
            <h2>类似商品</h2>
            <Operbanner similardata={similardata} />
          </div>

          {/* 加入购物车按钮 */}
          <div className="item_detail_cont_btn">
            {/* 到店自取按钮 */}
            <div ref="item_detail_serving_area" className="item_detail_serving_area" onClick={() => {
              this.jumpStoreList()
            }}><span className="iconfont icon-mendian1"></span><span>店铺</span></div>
            <div><button className="item_detail_cont_btncar" onClick={() => {
              this.openTypeBox()
            }}>私人订制</button></div>
          </div>
        </div>

        {/* 选规格弹窗 */}
        {
          typeboxisshow ? <div className="shopp_detail" onClick={() => { this.closeTypeBox() }} ><ShoopDetail openLoginHint={this.openLoginHint} closeTypeBox={this.closeTypeBox} /></div> : null
        }

        {/* 弹窗 */}
        {
          this.state.loginhint ?
            <div className="login_hint">
              <LoginHint closeLoginHint={this.closeLoginHint} />
            </div>

            : null
        }

      </div>
    )
  }

  // 挑选规格弹窗
  openTypeBox = () => {
    this.setState({ typeboxisshow: true })
  }
  closeTypeBox = (type, num) => {
    if (num !== undefined) {
      let { getChooseType, listitmedetail, choosetype } = this.props
      // 添加商品类型
      getChooseType({
        ...listitmedetail,
        type,
        num
      })
    }
    this.setState({ typeboxisshow: false })
  }

  // 改变收藏状态
  cahngeCollectState = () => {
    // 发送请求修改数据
    let { getCollectionCommodity } = this.props
    getCollectionCommodity({
      commodity_id: this.props.listitmedetail.commodity_id,
      user_id: cookies.get('user_id')
    })
  }

  jumpStoreList = () => {
    // console.log(this.props.history.location.pathname);
    this.props.history.push('/home2')
    // sessionStorage.setItem("router", JSON.stringify(this.props.history.location.pathname))
    // sessionStorage.setItem("store_id", JSON.stringify(this.props.listitmedetail.store))
    // sessionStorage.setItem("flag", JSON.stringify(false))
    // this.props.history.push('/list')
  }

  openLoginHint = () => {
    this.setState({ loginhint: true })
  }
  closeLoginHint = () => {
    this.setState({ loginhint: false })
  }

}

export default connect(state => state.foodf, action.foodf)(Itemdetail)
